<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-row>
            <el-col :span="12">
                <el-card shadow="hover" class="text-large chart-card">
                    <div class="chart-card-content">
                        <span class="text-mini title-tip">API花费详情</span>
                    </div>
                </el-card>
                <el-table v-loading="loading" :data="list_api" border script>
                    <el-table-column label="平台" prop="platform"></el-table-column>
                    <el-table-column label="账户ID" prop="advertiser_id"></el-table-column>
                    <el-table-column label="花费" prop="spend"></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="text-large chart-card">
                    <div class="chart-card-content">
                        <span class="text-mini title-tip">实际花费详情</span>
                    </div>
                </el-card>
                <el-table v-loading="loading" :data="list_official" border script>
                    <el-table-column label="平台" prop="platform"></el-table-column>
                    <el-table-column label="账户ID" prop="advertiser_id"></el-table-column>
                    <el-table-column label="花费" prop="spend"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
        
    </el-dialog>
</template>

<script>
import { queryCheckDetail} from '@/api/advertisement'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            list_api: [],
            list_official: [],
            rules: {
            },
            save: false,
            loading: true,
        }
    },
    computed: {
        title() {
            return `${this.type == 'edit' ? '编辑' : '新增'}广告账户`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            queryCheckDetail(params)
                .then(res => {
                    this.list_api = res.data.list_api
                    this.list_official = res.data.list_official
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.form-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
    width: 250px;
}
.form-class.el-form .el-form-item .el-textarea {
    width: 770px;
}
.form-class.el-form .el-form-item .el-input-number,
.form-class.el-form .el-form-item .el-input-number .el-input {
    width: 120px;
}
.form-class.el-form .el-form-item .el-input-number + .el-input-number {
    margin-left: 10px;
}
.form-class.el-form .el-form-item.full {
    width: 100%;
}
.upload {
}
.upload-tip span {
    color: #ff4949;
    padding: 0 4px;
}
</style>
